<template>
  <el-form :model="ruleForm" ref="ruleForm" :label-position="labelPosition" :rules="rules"
    :class="isEdit?'':'formItem'">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">维修信息</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="维修类别:">
            <el-radio-group v-model="ruleForm.maintenanceType" :disabled="!isEdit" @input="maintenanceTypeChange">
              <el-radio label="1">报废</el-radio>
              <el-radio label="2">一般维修</el-radio>
              <el-radio label="3">出险</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="ruleForm.maintenanceType === '3'">
          <el-form-item label="理赔类别:" prop="settlementType">
            <el-radio-group :disabled="!isEdit" v-model="ruleForm.settlementType">
              <el-radio label="1">实物赔付申请</el-radio>
              <el-radio label="2">理赔款支付申请</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" v-if="ruleForm.maintenanceType !== '3'">
        <el-col :span="8">
          <el-form-item label="预计维修开始时间:" prop="expectStartTime" v-if="isShow">
            <el-date-picker type="date" v-model="ruleForm.expectStartTime" v-if="isEdit" value-format='yyyy-MM-dd'
              style="width: 100%;" placeholder="选择预计维修开始时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.expectStartTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计维修结束时间:" prop="expectEndTime" v-if="isShow">

            <el-date-picker type="date" v-model="ruleForm.expectEndTime" v-if="isEdit" value-format='yyyy-MM-dd'
              style="width: 100%;" placeholder="选择预计维修结束时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.expectEndTime }}</span>

          </el-form-item>
        </el-col>
      </el-row>

      <!-- 保险类型 报废 -->
      <div v-if="ruleForm.maintenanceType === '1'">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="被保险人:" v-if="isShow" prop="insuredName">
              <el-input v-if="isEdit" v-model="ruleForm.insuredName" placeholder="输入被保险人"></el-input>
              <span v-else>{{ ruleForm.insuredName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="驾驶员:" v-if="isShow" prop="driverName">
              <el-input v-if="isEdit" v-model="ruleForm.driverName" placeholder="输入驾驶员"></el-input>
              <span v-else>{{ ruleForm.driverName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="责任人单位名称:" prop="responsibleUnitName" v-if="isShow">
              <el-input v-if="isEdit" v-model="ruleForm.responsibleUnitName" placeholder="输入责任人单位名称"></el-input>
              <span v-else>{{ ruleForm.responsibleUnitName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任类型:" prop="responsibilityType" v-if="isShow">
              <el-select v-model="ruleForm.responsibilityType" placeholder="选择责任类型" style="width: 100%;" v-if="isEdit">
                <el-option v-for="item in dict.type.responsibility_type" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span v-else>{{ handleCcomputed(dict.type.responsibility_type, ruleForm.responsibilityType) }}</span>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="责任方保险公司名称:" v-if="isShow" prop="responsibleInsuranceUnitName">
              <el-input v-if="isEdit" v-model="ruleForm.responsibleInsuranceUnitName"
                placeholder="输入责任方保险公司名称"></el-input>
              <span v-else>{{ ruleForm.responsibleInsuranceUnitName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事故日期:" prop="accidentDate" v-if="isShow">

              <el-date-picker type="date" v-model="ruleForm.accidentDate" v-if="isEdit" value-format='yyyy-MM-dd'
                style="width: 100%;" placeholder="选择事故日期">
              </el-date-picker>
              <span v-else>{{ ruleForm.accidentDate }}</span>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="事故类型:" prop="accidentType" v-if="isShow">
              <el-select v-model="ruleForm.accidentType" placeholder="选择事故类型" style="width: 100%;" v-if="isEdit"
                @change="handleAccidentType">
                <el-option v-for="item in dict.type.accident_type" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span v-else>{{ selectDictLabel(dict.type.accident_type, ruleForm.accidentType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出险地点:" prop="accidentLocation" v-if="isShow">
              <el-input v-if="isEdit" v-model="ruleForm.accidentLocation" placeholder="输入出险地点"></el-input>
              <span v-else>{{ ruleForm.accidentLocation }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否有人伤:" prop="humanInjury" v-if="isShow">
              <el-select v-model="ruleForm.humanInjury" placeholder="选择是否有人伤" style="width: 100%;" v-if="isEdit">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select>
              <span v-else>{{
                  ruleForm.humanInjury == "1" ? '是' : ruleForm.humanInjury ==
                  "2" ? '否' : ''
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报案时间:" prop="reportingCaseTime" v-if="isShow">

              <el-date-picker type="date" v-model="ruleForm.reportingCaseTime" v-if="isEdit" value-format='yyyy-MM-dd'
                style="width: 100%;" placeholder="选择报案时间">
              </el-date-picker>
              <span v-else>{{ ruleForm.reportingCaseTime }}</span>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col v-if="isShow">
            <el-form-item label="定损单:" prop="lossAssessmentUrl">
              <image-common v-model="ruleForm.lossAssessmentUrl" :limit="20" :disabled="!isEdit" :upType="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 维修类型 一般维修 -->
      <div v-if="ruleForm.maintenanceType === '2'">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="签约维修厂/维修厂:" prop="maintenanceShopId" v-if="isShow">
              <el-select v-if="isEdit" v-model="ruleForm.maintenanceShopId" @change="handleChange" style="width: 100%"
                filterable placeholder="请选择输入维修厂">
                <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                  :value="item.supplierId" />
              </el-select>
              <span v-else>{{ ruleForm.maintenanceShop }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障现象:" prop="faultPhenomenon" v-if="isShow">
              <el-input v-if="isEdit" v-model="ruleForm.faultPhenomenon" placeholder="输入故障现象"></el-input>
              <span v-else>{{ ruleForm.faultPhenomenon }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="维修厂故障诊断:" prop="maintenanceFaultDiagnosis">
              <el-input v-if="isEdit" v-model="ruleForm.maintenanceFaultDiagnosis" placeholder="输入维修厂故障诊断"></el-input>
              <span v-else>{{ ruleForm.maintenanceFaultDiagnosis }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="维修厂报价:" prop="maintenanceQuoter">
              <el-input v-if="isEdit" disabled v-model="ruleForm.maintenanceQuoter" v-thousand
                @change="changeAmount('maintenanceQuoter')" placeholder="输入维修厂报价"></el-input>
              <span v-else>{{ format_thousand(ruleForm.maintenanceQuoter) }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="isShow">
            <el-form-item label="是否符合索赔理由:" prop="reasonForClaim">
              <el-select v-model="ruleForm.reasonForClaim" placeholder="选择是否符合索赔理由" style="width: 100%;" v-if="isEdit">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select>
              <span v-else>{{
                  ruleForm.reasonForClaim == "1" ? '是' : ruleForm.reasonForClaim == "2" ? '否' : ''
                }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="isShow">
            <el-form-item label="是否有同车型(处置车辆)对换配件:" prop="swappingAccessories">
              <el-select v-model="ruleForm.swappingAccessories" placeholder="选择是否有同车型(处置车辆)对换配件" style="width: 100%;"
                v-if="isEdit">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select>
              <span v-else>{{
                  ruleForm.swappingAccessories == "1" ? '是' : ruleForm.swappingAccessories ==
                  "2" ? '否' : ''
                }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="ruleForm.reasonForClaim == '2'" prop="claimantReason">
            <el-form-item label="不符合索赔理由:">
              <el-input v-if="isEdit" v-model="ruleForm.claimantReason" placeholder="输入不符合索赔理由"></el-input>
              <span v-else>{{ ruleForm.claimantReason }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="isShow">
            <el-form-item label="综合建议方案:" prop="comprehensiveRecommendations">
              <el-input v-if="isEdit" placeholder="综合建议方案" type="textarea" :rows="4"
                v-model="ruleForm.comprehensiveRecommendations"></el-input>
              <span v-else>{{ ruleForm.comprehensiveRecommendations }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="isShow" :span="24">
            <el-form-item label="备注:" prop="generalMaintenanceRemark">
              <el-input v-if="isEdit" placeholder="输入备注" type="textarea" :rows="4"
                v-model="ruleForm.generalMaintenanceRemark"></el-input>
              <span v-else>{{ ruleForm.generalMaintenanceRemark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!--  保险类型 出险    -->
      <div v-if="ruleForm.maintenanceType === '3'">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="被保险人:" v-if="isShow" prop="insuredName">
              <el-input v-if="isEdit" v-model="ruleForm.insuredName" placeholder="输入被保险人"></el-input>
              <span v-else>{{ ruleForm.insuredName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="驾驶员:" v-if="isShow" prop="driverName">
              <el-input v-if="isEdit" v-model="ruleForm.driverName" placeholder="输入驾驶员"></el-input>
              <span v-else>{{ ruleForm.driverName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任类型:" v-if="isShow" prop="responsibilityType">
              <el-select v-model="ruleForm.responsibilityType" placeholder="选择责任类型" style="width: 100%;"
                @change="handleResponsibilityType" v-if="isEdit">
                <el-option v-for="item in dict.type.responsibility_type" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span v-else>{{ handleCcomputed(dict.type.responsibility_type, ruleForm.responsibilityType) }}</span>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="责任人单位名称:" v-if="isShow" prop="responsibleUnitName">
              <el-input v-if="isEdit" v-model="ruleForm.responsibleUnitName" placeholder="输入责任人单位名称"></el-input>
              <span v-else>{{ ruleForm.responsibleUnitName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事故类型:" v-if="isShow" prop="accidentType">
              <el-select v-model="ruleForm.accidentType" placeholder="选择事故类型" style="width: 100%;" v-if="isEdit"
                @change="handleAccidentType">
                <el-option v-for="item in dict.type.accident_type" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span v-else>{{ selectDictLabel(dict.type.accident_type, ruleForm.accidentType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出险地点:" v-if="isShow" prop="accidentLocation">
              <el-input v-if="isEdit" v-model="ruleForm.accidentLocation" placeholder="输入出险地点"></el-input>
              <span v-else>{{ ruleForm.accidentLocation }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否有人伤:" v-if="isShow" prop="humanInjury">
              <el-select v-model="ruleForm.humanInjury" placeholder="选择是否有人伤" style="width: 100%;" v-if="isEdit">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select>
              <span v-else>
                {{ ruleForm.humanInjury === "1" ? '是' : ruleForm.humanInjury === "2" ? '否' : '' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出险日期:" prop="accidentTime" v-if="isShow">
              <el-date-picker type="date" v-model="ruleForm.accidentTime" v-if="isEdit" value-format='yyyy-MM-dd'
                              @change="handleAccidentTime" style="width: 100%;" placeholder="选择出险日期">
              </el-date-picker>
              <span v-else>{{ ruleForm.accidentTime }}</span>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报案时间:" v-if="isShow" prop="reportingCaseTime">
              <el-date-picker type="date" v-model="ruleForm.reportingCaseTime" v-if="isEdit" value-format='yyyy-MM-dd'
                style="width: 100%;" placeholder="选择报案时间">
              </el-date-picker>
              <span v-else>{{ ruleForm.reportingCaseTime }}</span>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计维修开始时间:" prop="expectStartTime" v-if="isShow">
              <el-date-picker type="date" v-model="ruleForm.expectStartTime" v-if="isEdit" value-format='yyyy-MM-dd'
                style="width: 100%;" placeholder="选择预计维修开始时间">
              </el-date-picker>
              <span v-else>{{ ruleForm.expectStartTime }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="预计维修结束时间:" prop="expectEndTime" v-if="isShow">
              <el-date-picker type="date" v-model="ruleForm.expectEndTime" v-if="isEdit" value-format='yyyy-MM-dd'
                style="width: 100%;" placeholder="选择预计维修结束时间">
              </el-date-picker>
              <span v-else>{{ ruleForm.expectEndTime }}</span>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交强险保单号:" v-if="isShow" prop="compulsoryPolicyNum">
              <el-input v-if="isEdit" v-model="ruleForm.compulsoryPolicyNum"
                @change="handleWarranty('compulsoryPolicyNum')" placeholder="输入交强险保单号"></el-input>
              <span v-else>{{ ruleForm.compulsoryPolicyNum }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商业险保单号:" prop="commercialPolicyNum" v-if="isShow">
              <el-input v-if="isEdit" v-model="ruleForm.commercialPolicyNum"
                @change="handleWarranty('commercialPolicyNum')" placeholder="输入交强险保单号"></el-input>
              <span v-else>{{ ruleForm.commercialPolicyNum }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报案号:" prop="reportingCaseNum">
              <el-input v-model="ruleForm.reportingCaseNum" v-if="isEdit" placeholder="请输入报案号" />
              <span v-else>{{ ruleForm.reportingCaseNum }}</span>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row :gutter="24">-->
<!--          <el-col v-if="isShow">-->
<!--            <el-form-item label="定损单:" prop="lossAssessmentUrl">-->
<!--              <image-common v-model="ruleForm.lossAssessmentUrl" :limit="20" :disabled="!isEdit" :upType="2" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </div>

    </el-card>

    <!-- 维修项目明细 -->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType === '2'">
      <div slot="header" class="header-card">
        <div style="width:100%;display: flex;justify-content: space-between">
          <span class="header-card-title">维修项目明细</span>
        </div>

      </div>
      <el-row :gutter="24" style="margin-bottom: 16px;">
        <el-col v-if="isShow">
          <el-table size="mini" :data="ruleForm.carMaintenanceProjectList" border style="width: 100%"
            :header-cell-class-name="headerClass">
            <el-table-column align="center" label="操作" width="68" v-if="isEdit">
              <template #default="{row,$index}">
                <el-button size="mini" type="text" @click="delDecoration(row, $index)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="维修项目名称" min-width="160" prop="maintenanceName">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'carMaintenanceProjectList.'+$index+'.maintenanceName'"
                  :rules="{required: true,  trigger: 'blur'}">
                  <el-input v-model="row.maintenanceName" v-if=" isEdit" size="mini"></el-input>
                  <span v-else>
                    {{ row.maintenanceName }}
                  </span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="金额/元" min-width="100" prop="price">
              <template #default="{row,$index}">
                <span>
                  {{ format_thousand(handlePice(row,$index)) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价材料费" min-width="120" prop="materialCost">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'carMaintenanceProjectList.'+$index+'.materialCost'"
                  :rules="{required: true,  trigger: 'blur'}">
                  <el-input v-model="row.materialCost" v-if=" isEdit" v-thousand
                    @change=" changeThreeLoss(row, $index, 'materialCost')" size="mini"></el-input>
                  <span v-else>
                    {{ format_thousand(row.materialCost) }}
                  </span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" min-width="120" prop="maintNum">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'carMaintenanceProjectList.'+$index+'.maintNum'"
                  :rules="{required: true,  trigger: 'blur'}">
                  <el-input v-model="row.maintNum" v-if=" isEdit" @change="changeThreeLoss(row, $index, 'maintNum')"
                    size="mini"></el-input>

                  <span v-else>{{ row.maintNum }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价工时费" min-width="120" prop="laborCost">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'carMaintenanceProjectList.'+$index+'.laborCost'"
                  :rules="{required: true,  trigger: 'blur'}">
                  <el-input v-model="row.laborCost" v-if=" isEdit" v-thousand
                    @change=" changeThreeLoss(row, $index, 'laborCost')" size="mini"></el-input>
                  <span v-else>
                    {{ format_thousand(row.laborCost) }}
                  </span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="配件号" min-width="140">
              <template #default="{row}">
                <el-input v-model="row.partNumber" v-if=" isEdit" size="mini"></el-input>
                <span v-else>
                  {{ row.partNumber }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="品牌" min-width="120">
              <template #default="{row}">
                <el-input v-model="row.maintBrand" v-if=" isEdit" size="mini"></el-input>
                <span v-else>
                  {{ row.maintBrand }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="型号" min-width="120">
              <template #default="{row}">
                <el-input v-model="row.maintModel" v-if=" isEdit" size="mini"></el-input>
                <span v-else>
                  {{ row.maintModel }}
                </span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="详细信息" min-width="150">
              <template #default="{row}">
                <el-input v-model="row.detailedInfo" v-if=" isEdit" size="mini"></el-input>
                <span v-else>
                  {{ row.detailedInfo }}
                </span>
              </template>
            </el-table-column>
            <template v-slot:append>
              <div class="flex-xy-center" style="height: 30px">
                <e-button type="text" icon="eel-icon-plus" @click="addDecoration" v-if="isEdit">添加
                </e-button>
              </div>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col v-if="isShow">
          <el-form-item label="上传附件:">
            <image-common v-model="ruleForm.maintenanceProjectUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 保险公司定损额 -->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType === '1'">
      <div slot="header" class="header-card">
        <span class="header-card-title">保险公司定损额（车）</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="定损总计:" prop="assessmentTotalPrice" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.assessmentTotalPrice" placeholder="输入定损总计" v-thousand
              disabled></el-input>
            <span v-else>{{ format_thousand(ruleForm.assessmentTotalPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主车定损金额:" prop="vehicleAssessmentPrice" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.vehicleAssessmentPrice" placeholder="输入主车定损金额" v-thousand
              @change="changeAmount('vehicleAssessmentPrice')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.vehicleAssessmentPrice) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拍卖公司残值:" prop="residualValue" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.residualValue" placeholder="输入物损金额" v-thousand
              @change="changeAmount('residualValue')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.residualValue) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他金额:" prop="carOther" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.carOther" placeholder="输入其他金额" v-thousand
              @change="changeAmount('carOther')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.carOther) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拍卖公司名称:" prop="auctionCompanyName" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.auctionCompanyName" placeholder="输入拍卖公司名称"></el-input>
            <span v-else>{{ ruleForm.auctionCompanyName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号:" prop="bankAccount" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.bankAccount" placeholder="输入银行账号"></el-input>
            <span v-else>{{ ruleForm.bankAccount }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col>
          <el-form-item label="拍卖公司残值附件:" prop="residualUrl" v-if="isShow">
            <image-common v-model="ruleForm.residualUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>

    <!--主车定损*-->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType === '3'">
      <div slot="header" class="header-card">
        <span class="header-card-title">主车定损</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="主车定损金额:"  v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.vehicleAssessmentPrice" placeholder="输入主车定损金额" v-thousand
              @change="changeAmount('vehicleAssessmentPrice')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.vehicleAssessmentPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人伤金额:" prop="persionAssessmentPrice" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.persionAssessmentPrice"
                      :disabled="Number(ruleForm.humanInjury) === 2"
                      placeholder="输入人伤金额" v-thousand
              @change="changeAmount('persionAssessmentPrice')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.persionAssessmentPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他金额:" prop="otherAssessmentPrice" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.otherAssessmentPrice" placeholder="输入其他金额" v-thousand
              @change="changeAmount('otherAssessmentPrice')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.otherAssessmentPrice) }}</span>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="定损总计:"  v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.assessmentTotalPrice" v-thousand placeholder="输入定损总计"
              disabled></el-input>
            <span v-else>{{ format_thousand(ruleForm.assessmentTotalPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约维修厂/维修厂:" prop="maintenanceShopId" v-if="isShow">
            <el-select v-if="isEdit" v-model="ruleForm.maintenanceShopId" @change="handleChange" style="width: 100%"
              placeholder="请选择输入维修厂">
              <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                :value="item.supplierId" />
            </el-select>
            <span v-else>{{ ruleForm.maintenanceShop }}</span>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="24">
        <el-col>
          <el-form-item label="事故照片:" prop="accidentPhotos" v-if="isShow">
            <ImageUpload v-model="ruleForm.accidentPhotos" :limit="20" v-if="isEdit" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col>
          <el-form-item label="定损单:" prop="lossAssessmentOss" v-if="isShow">
            <image-common v-model="ruleForm.lossAssessmentOss" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!--保险公司定损额（三者）-->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType !== '2'">
      <div slot="header" class="header-card">
        <div style="display: flex;justify-content: space-between;width: 100%">
          <span class="header-card-title">保险公司定损额（三者）</span>

        </div>
      </div>
      <el-row :gutter="24" style="margin-bottom: 16px;">
        <el-col v-if="isShow">
          <el-table size="mini" :data="ruleForm.threeLossAssessmentDtoList" border style="width: 100%"
            :header-cell-class-name="headerClass">

            <el-table-column align="center" label="操作" width="68"
              v-if="ruleForm.threeLossAssessmentDtoList.length > 1 && isEdit" fixed="right">
              <template #default="{row,$index}">
                <el-button size="mini" type="danger" @click="delThreeLoss(row, $index)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column align="center" label="人伤金额" min-width="140" prop="personPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.personPrice'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.personPrice" v-if="isEdit" size="mini" v-thousand
                    @change="changeThreeLoss(row, $index, 'personPrice')"></el-input>
                  <span v-else>{{ format_thousand(row.personPrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="施救费用" min-width="140" prop="rescueCost">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.rescueCost'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.rescueCost" v-if="isEdit" v-thousand
                    @change="changeThreeLoss(row, $index, 'rescueCost')" size="mini"></el-input>
                  <span v-else> {{ format_thousand(row.rescueCost) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="物损金额" min-width="140" prop="damagePrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.damagePrice'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.damagePrice" v-if="isEdit" v-thousand
                    @change="changeThreeLoss(row, $index, 'damagePrice')" size="mini"></el-input>
                  <span v-else>{{ format_thousand(row.damagePrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="三者定损金额" min-width="140" prop="otherAssessmentPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.otherAssessmentPrice'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.otherAssessmentPrice" v-if="isEdit"
                    @change="changeThreeLoss(row, $index, 'otherAssessmentPrice')" v-thousand size="mini"></el-input>
                  <span v-else>{{ format_thousand(row.otherAssessmentPrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="三者车牌号" min-width="140" prop="otherCarNo">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.otherCarNo'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.otherCarNo" v-if="isEdit" size="mini"></el-input>
                  <span v-else>{{ row.otherCarNo }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="其他" min-width="140" prop="threeOther">
              <template #default="{row}">
                <el-input v-model="row.threeOther" v-if="isEdit" size="mini"></el-input>
                <span v-else>
                  {{ row.threeOther }}
                </span>
              </template>
            </el-table-column>
            <template v-slot:append v-if="ruleForm.accidentType == 3 && isEdit">
              <div class="flex-xy-center" style="height: 30px">
                <e-button type="text" @click="addThreeLoss">
                  新增
                </e-button>
              </div>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col v-if="isShow">
          <el-form-item label="上传附件:">
            <image-common v-model="ruleForm.maintenanceProjectUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 其他费用 -->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType !== '2'">
      <div slot="header" class="header-card">
        <span class="header-card-title">其他费用</span>
      </div>
      <el-row :gutter="24">

        <el-col :span="8">
          <el-form-item label="其他费用:" v-if="isShow" prop="otherPrice">
            <el-input v-if="isEdit" v-model="ruleForm.otherPrice" @change="changeAmount('otherPrice')"
              placeholder="输入其他费用" v-thousand></el-input>
            <span v-else>{{ format_thousand(ruleForm.otherPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他费用产生原因:" v-if="isShow" prop="otherCostReason">
            <el-input v-if="isEdit" v-model="ruleForm.otherCostReason" placeholder="输入其他费用产生原因"></el-input>
            <span v-else>{{ ruleForm.otherCostReason }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <el-form-item label="其他费用产生附件:" v-if="isShow" prop="otherCostUrl">
            <image-common v-model="ruleForm.otherCostUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 出险相关信息 -->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType !== '2'">
      <div slot="header" class="header-card">
        <span class="header-card-title">出险相关信息</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="是否个人垫付:" prop="advancePayment" v-if="isShow">
            <el-select v-model="ruleForm.advancePayment" placeholder="选择是否个人垫付" style="width: 100%;" v-if="isEdit">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
            <span v-else>{{
                ruleForm.advancePayment == "1" ? '是' : ruleForm.advancePayment == "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="ruleForm.maintenanceType !== '3'">
          <el-form-item label="维修厂:" prop="maintenanceShopId" v-if="isShow">
            <el-select v-if="isEdit" v-model="ruleForm.maintenanceShopId" @change="handleChange" style="width: 100%"
              placeholder="请选择输入维修厂">
              <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                :value="item.supplierId" />
            </el-select>
            <span v-else>{{ ruleForm.maintenanceShop }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="个人垫付费用:" prop="advancePaymentCost" v-if="isShow && ruleForm.advancePayment == '1'">
            <el-input v-if="isEdit" v-model="ruleForm.advancePaymentCost" @change="changeAmount('advancePaymentCost')"
              placeholder="输入个人垫付费用" v-thousand></el-input>
            <span v-else>{{ format_thousand(ruleForm.advancePaymentCost) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <el-form-item label="备注:" prop="assessmentRemark" v-if="isShow">
            <el-input v-if="isEdit" placeholder="输入备注" type="textarea" :rows="4"
              v-model="ruleForm.assessmentRemark"></el-input>
            <span v-else>{{ ruleForm.assessmentRemark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!--收取加速折旧费-->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType === '3'">
      <div slot="header" class="header-card">
        <span class="header-card-title">收取加速折旧费</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="加速折旧费方案:" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.depreciationPlan" disabled
                      placeholder="加速折旧费方案"/>
            <span v-else>{{ ruleForm.depreciationPlan }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="加速折旧费金额:">
            <el-input v-if="isEdit" v-model="ruleForm.depreciationPrice" disabled @change="changeAmount('depreciationPrice')"
              placeholder="加速折旧费金额" v-thousand />
            <span v-else>{{ format_thousand(ruleForm.depreciationPrice) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!--用印文件-->
    <el-card class="box-card" shadow="never" v-if="ruleForm.maintenanceType === '3'">
      <div slot="header" class="header-card">
        <span class="header-card-title">用印文件</span>
      </div>
      <el-row :gutter="24">
        <el-col>
          <el-form-item label="上传用印文件:" v-if="isShow" prop="useSealsOss">
            <image-common v-model="ruleForm.useSealsOss" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import { effectDate } from "@/utils/libs/effectDate.js";
import { getInsuranceSelectList ,getDepreciationRule} from "@/api/cwgd/insuranceSelect";
import { getInsuranceTime } from "@/api/bxlp/settlement.js";
export default {
  dicts: ["accident_type", "responsibility_type"],
  name: "repairDstail",

  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    handleCcomputed() {
      return function (objData, val) {
        let label = "";
        let index = objData.findIndex((a) => a.value == val);
        if (index !== -1) {
          label = objData[index].label;
        }
        return label;
      };
    },
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            if (value) {
              that.handleClear(key);
            }
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "lef";
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {},
  data() {
    var start = (rule, value, callback) => {
      let that = this;
      effectDate(
        rule,
        value,
        callback,
        that.ruleForm.expectStartTime,
        that.ruleForm.expectEndTime,
        "预计维修开始时间",
        "预计开维结束时间"
      );
    };
    var end = (rule, value, callback) => {
      let that = this;
      effectDate(
        rule,
        value,
        callback,
        that.ruleForm.expectStartTime,
        that.ruleForm.expectEndTime,
        "预计维修开始时间",
        "预计开维结束时间"
      );
    };
    return {
      isShow: true,
      headerCarMaintenanceProjectList: [
        "maintenanceName",
        "price",
        "materialCost",
        "laborCost",
        "maintNum",
      ],
      headerThreeLossAssessmentDtoList: [
        "personPrice",
        "rescueCost",
        "damagePrice",
        "otherAssessmentPrice",
        "otherCarNo",
      ],
      rules: {
        //保险类型 报废/出险
        expectStartTime: [
          {
            required: this.state === "write",
            validator: start,
            trigger: "change",
          },
        ],
        expectEndTime: [
          {
            required: this.state === "write",
            validator: end,
            trigger: "change",
          },
        ],
        insuredName: [
          {
            required: this.state === "write",
            message: "请输入被保险人",
            trigger: "blur",
          },
        ],
        driverName: [
          {
            required: this.state === "write",
            message: "请输入驾驶员",
            trigger: "blur",
          },
        ],
        responsibleUnitName: [
          {
            required: this.state === "write",
            message: "请输入责任人单位名称",
            trigger: "blur",
          },
        ],
        responsibilityType: [
          {
            required: this.state === "write",
            message: "请选择责任类型",
            trigger: "change",
          },
        ],
        responsibleInsuranceUnitName: [
          {
            required: this.state === "write",
            message: "输入责任方保险公司名称",
            trigger: "blur",
          },
        ],
        accidentDate: [
          {
            required: this.state === "write",
            message: "请选择事故日期",
            trigger: "change",
          },
        ],
        accidentLocation: [
          {
            required: this.state === "write",
            message: "请输入出险地点",
            trigger: "blur",
          },
        ],
        humanInjury: [
          {
            required: this.state === "write",
            message: "选择是否有人伤",
            trigger: "change",
          },
        ],
        reportingCaseTime: [
          {
            required: this.state === "write",
            message: "请选择报案时间",
            trigger: "change",
          },
        ],
        lossAssessmentUrl: [
          {
            required: this.state === "write",
            message: "请选择定损单",
            trigger: "change",
          },
        ],
        accidentType: [
          {
            required: this.state === "write",
            message: "请选择事故类型",
            trigger: "change",
          },
        ],
        settlementType: [
          {
            required: this.state === "write",
            message: "请选择理赔类别",
            trigger: "change",
          },
        ],
        accidentTime: [
          {
            required: this.state === "write",
            message: "请选择出险日期",
            trigger: "change",
          },
        ],
        compulsoryPolicyNum: [
          {
            required: this.state === "write",
            message: "请输入交强险保单号",
            trigger: "blur",
          },
        ],
        commercialPolicyNum: [
          {
            required: this.state === "write",
            message: "请输入商业险保单号",
            trigger: "blur",
          },
        ],
        reportingCaseNum: [
          {
            required: this.state === "write",
            message: "请输入报案号",
            trigger: "blur",
          },
        ],

        //维修类型 一般维修
        maintenanceShop: [
          {
            required: this.state === "write",
            message: "请输入签约保养厂/保养厂",
            trigger: "blur",
          },
        ],
        faultPhenomenon: [
          {
            required: this.state === "write",
            message: "请输入故障现象",
            trigger: "blur",
          },
        ],
        maintenanceFaultDiagnosis: [
          {
            required: this.state === "write",
            message: "请输入维修厂故障诊断",
            trigger: "blur",
          },
        ],
        maintenanceQuoter: [
          {
            required: this.state === "write",
            message: "请输入维修厂报价",
            trigger: "blur",
          },
        ],
        reasonForClaim: [
          {
            required: this.state === "write",
            message: "请选择是否符合索赔理由",
            trigger: "change",
          },
        ],
        comprehensiveRecommendations: [
          {
            required: this.state === "write",
            message: "请输入综合建议方案",
            trigger: "blur",
          },
        ],

        maintenanceProjectUrl: [
          {
            required: this.state === "write",
            message: "请选择定损单",
            trigger: "change",
          },
        ],

        //保险公司定损额
        assessmentTotalPrice: [
          {
            required: this.state === "write",
            message: "请输入定损总计",
            trigger: "blur",
          },
        ],
        vehicleAssessmentPrice: [
          {
            required: this.state === "write",
            message: "请输入主车定损金额",
            trigger: "blur",
          },
        ],
        residualValue: [
          {
            required: this.state === "write",
            message: "请输入拍卖公司残值",
            trigger: "blur",
          },
        ],
        auctionCompanyName: [
          {
            required: this.state === "write",
            message: "请输入拍卖公司名称",
            trigger: "blur",
          },
        ],
        residualUrl: [
          {
            required: this.state === "write",
            message: "请选择定损单",
            trigger: "blur",
          },
        ],

        //出险相关信息
        advancePayment: [
          {
            required: this.state === "write",
            message: "请选择是否个人垫付",
            trigger: "change",
          },
        ],
        maintenanceShopId: [
          {
            required: this.state === "write",
            message: "请输入输入维修厂",
            trigger: "blur",
          },
        ],
        advancePaymentCost: [
          {
            required: this.state === "write",
            message: "请输入个人垫付费用",
            trigger: "blur",
          },
        ],
      },
      requiredTable: false,
      options: [],
    };
  },

  created() {
    this.handleList();
  },
  mounted() {},
  methods: {
    handlePice(val, index) {
      let num = 0;
      num =
        Number(val.materialCost) * Number(val.maintNum) + Number(val.laborCost);
      this.$set(this.value.carMaintenanceProjectList[index], "price", num);
      return num;
    },

    handleAccidentTime(val) {
      if (val) {
        let obj = {
          settlementDate: val,
          carId: this.ruleForm.carId,
        };
        getInsuranceTime(obj).then((res) => {
          if (res) {
            if (res.jqxPolicyCode) {
              this.$set(this.value, "compulsoryPolicyNum", res.jqxPolicyCode);
            }
            if (res.syxPolicyCode) {
              this.$set(this.value, "commercialPolicyNum", res.syxPolicyCode);
            }
          }
        });
      }
    },

    handleCount(val) {
      let num = 0;
      val.map((item) => {
        num +=
          Number(item.price)
      });
      this.ruleForm.maintenanceQuoter = num;
    },

    handleList() {
      getInsuranceSelectList({ businessTypeCode: "4" }).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },

    handleChange(val) {
      this.ruleForm.maintenanceShopId = val;
      this.value.maintenanceShopId = val;
      this.ruleForm.maintenanceShop = this.options.find(
        (item) => item.supplierId === val
      ).supplierName;
      this.value.maintenanceShop = this.options.find(
        (item) => item.supplierId === val
      ).supplierName;
    },

    //重置对象初始值
    handleInitialValue() {
      let objData = {
        accidentDate: "",
        accidentLocation: "",
        accidentType: "",
        advancePayment: "",
        advancePaymentCost: "",
        assessmentRemark: "",
        assessmentTotalPrice: "",
        auctionCompanyName: "",
        bankAccount: "",
        carId: this.$route.query.carId,
        carMaintenanceProjectList: [],
        carOther: "",
        claimantReason: "",
        comprehensiveRecommendations: "",
        driverName: "",
        expectEndTime: "",
        expectStartTime: "",
        faultPhenomenon: "",
        generalMaintenanceRemark: "",
        humanInjury: "",
        // insuredName: "",
        lossAssessmentUrl: "",
        maintenanceFaultDiagnosis: "",
        maintenanceId: "",
        maintenanceProjectUrl: "",
        maintenanceQuoter: "",
        maintenanceShop: "",
        maintenanceType: "1",
        otherCostReason: "",
        otherCostUrl: "",
        otherPrice: "",
        reasonForClaim: "",
        reportingCaseTime: "",
        residualUrl: "",
        residualValue: "",
        responsibilityType: "",
        responsibleInsuranceUnitName: "",
        responsibleUnitName: "",
        swappingAccessories: "",
        threeLossAssessmentDtoList: [
          {
            personPrice: "",
            rescueCost: "",
            damagePrice: "",
            otherAssessmentPrice: "",
            otherCarNo: "",
            threeOther: "",
          },
        ],
        travelMeligile: "",
        vehicleAssessmentPrice: "",
        workId: "",
        settlementType: "",
        accidentTime: "",
        // compulsoryPolicyNum: "",
        // commercialPolicyNum: "",
        depreciationPrice: "",
        depreciationPlan: "",
        useSealsOss: "",
        lossAssessmentOss: "",
        otherAssessmentPrice: "",
        persionAssessmentPrice: "",
        accidentPhotos: "",
        compensationPaymentDto: [
          {
            payee: "", //收款方
            payAmount: "", //   收款费用
            collectionAccount: "", //收账号
          },
        ],
        compensationPaymentTotalAmount: "",
        actualStartTime: "",
        addAmountNun: "",
        actualEndTime: "",
        newPurchasePrice: "",
        accidentsNumber: "",
        chargingFees: "",
        fullCollectionFlag: "",
        insurancePayment: "",
        payType: "",
        maintenanceCompleteUrl: "",
        maintenanceCertificate: "",
        maintenanceFeedback: "",
        maintenanceShopId: "",
      };
      let objDataVale = JSON.parse(JSON.stringify(objData));
      for (let key in objDataVale) {
        this.value[key] = objDataVale[key];
      }
      this.handleClear();
      if (!this.ruleForm.maintenanceQuoter) {
        this.ruleForm.maintenanceQuoter = this.value.maintenanceQuoter = 0;
      }
    },

    handleResponsibilityType(val) {
      if (this.ruleForm.accidentType === "2" && val != 1) {
        this.requiredTable = true;
      } else {
        this.requiredTable = false;
      }
    },

    //事故类型事件
    handleAccidentType(val) {
      if (val === "2" && val.ruleForm.responsibilityType != 1) {
        this.requiredTable = true;
      } else {
        this.requiredTable = false;
      }
    },

    maintenanceTypeChange(val) {
      this.handleInitialValue();
      this.ruleForm.maintenanceType = val;
    },

    headerClass({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < row.length; i++) {
        if (
          this.headerCarMaintenanceProjectList.includes(row[i].property) &&
          i == columnIndex
        ) {
          return "header-class";
        }
      }
      for (let i = 0; i < row.length; i++) {
        if (
          this.headerThreeLossAssessmentDtoList.includes(row[i].property) &&
          i == columnIndex &&
          this.requiredTable
        ) {
          return "header-class";
        }
      }
    },

    //新增
    addDecoration() {
      let obj = {
        maintenanceName: "",
        price: "",
        materialCost: "",
        laborCost: "",
        partNumber: "",
        maintBrand: "",
        maintModel: "",
        maintNum: "",

        detailedInfo: "",
        disabled: true,
      };
      this.ruleForm.carMaintenanceProjectList.push(obj);
    },

    delDecoration(row, key) {
      this.ruleForm.carMaintenanceProjectList.splice(key, 1);
      this.handleCount(this.ruleForm.carMaintenanceProjectList);
    },

    //新增保险公司定损额（三者）
    addThreeLoss() {
      let obj = {
        personPrice: "",
        rescueCost: "",
        damagePrice: "",
        otherAssessmentPrice: "",
        otherCarNo: "",
        threeOther: "",
      };
      this.ruleForm.threeLossAssessmentDtoList.push(obj);
    },

    delThreeLoss(row, key) {
      this.ruleForm.threeLossAssessmentDtoList.splice(key, 1);
    },

    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (!msg.test(this.value[str])) {
        this.value[str] = "";
      } else {
        this.value[str] = this.value[str]
          .toString()
          .match(/^\d+(?:\.\d{0,2})?/)[0];
      }
      this.sumPrice();
      if (str === 'vehicleAssessmentPrice') {
        getDepreciationRule({vehicleAssessmentPrice: this.value[str]}).then(res => {
          if (res.code === 200) {
            this.$set(this.value, 'depreciationPlan', res.data?.depreciationPlan)
            this.$set(this.value, 'depreciationPrice', Number(res.data?.depreciationPrice) || 0)
          }
        })
      }
    },

    handleWarranty(str) {
      let msg = /^[A-Za-z0-9]+$/;
      if (!msg.test(this.value[str])) {
        this.value[str] = "";
      } else {
        this.value[str] = this.value[str];
      }
    },

    //定损总计
    sumPrice() {
      let num = 0;
      if (this.ruleForm.maintenanceType === "1") {
        num =
          Number(this.ruleForm.vehicleAssessmentPrice) +
          Number(this.ruleForm.residualValue) +
          Number(this.ruleForm.carOther);
      }
      if (this.ruleForm.maintenanceType === "3") {
        num =
          Number(this.ruleForm.vehicleAssessmentPrice) +
          Number(this.ruleForm.persionAssessmentPrice) +
          Number(this.ruleForm.otherAssessmentPrice);
      }

      this.ruleForm.assessmentTotalPrice = num
        .toString()
        .match(/^\d+(?:\.\d{0,2})?/)[0];
    },

    changeThreeLoss(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      // if (field == "price") {
      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
      this.handleCount(this.ruleForm.carMaintenanceProjectList);
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            this.locateToErr();
            reject();
          }
        });
      });
    },

    locateToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName("is-error");
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: "center",
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: "smooth",
        });
      });
    },

    handleClear(str) {
      this.$refs.ruleForm.clearValidate(str);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.decoration-illustrate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}

::v-deep .box-card:last-child {
  margin-bottom: 0 !important;
}
</style>


